{% stylesheet %}
.blog_list {
  position: relative;
  overflow: hidden;
}

.blog_list:hover .blog-prev {
  opacity: 1;
  left: 10px;
}

.blog_list:hover .blog-next, .blog_list:hover .blog-prev {
  opacity: 1;
  right: 10px;
}

.blog_list .blog-next, .blog_list .blog-prev {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30px;
  cursor: pointer;
  opacity: 0;
  right: 0;
  transition: all 0.4s ease-in-out;
}

.blog_list .blog-next svg, .blog_list .blog-prev svg {
  width: 20px;
  height: 20px;
}

.blog_list .blog-next svg path, .blog_list .blog-prev svg path {
  fill: #555555;
}

.blog_list .blog-next:hover, .blog_list .blog-prev:hover {
  background: #ffffff;
}

.blog_list .blog-prev {
  left: 0;
}

.blog_list .swiper-blog-pagination {
  text-align: center;
  padding-top: 10px;
}

.blog_list .swiper-blog-pagination .swiper-pagination-bullet-active {
  background-color: #b9a16b;
}

{% endstylesheet %}
{% assign textAlign = "left, center, right" | split: ", " %}
{% assign index = section.settings.text_alignment |  abs %}
{% assign blockId = block_id | default : section.block_id %}
  <div id="block_blog" class="container-wrapper animation-init" data-animation="animation-move-bottom">
      {% include 'title',title:section.settings.title,detail:section.settings.detail %}
      <div class="blog_list" id="block_blog_list_{{blockId}}">
          <ul class="swiper-wrapper">
              
              {% assign blogs_ids = section.blocks | get_array_values: "blog" | get_array_values: "id" | join: "," %}
              {% if section.blocks.size %}
              {% get_blogs ids={blogs_ids} %}
              {% for block in section.blocks %}
              {% assign id = block.blog.id %}
                {% if blogs[id].size > 1  %} 
                  {% assign blog = blogs[id] %}
                  <li class="swiper-slide">{% include 'blog_item', section :section,blog:blog %}</li>
                {% else %}
                  <li class="swiper-slide">{% include 'blog_item', section :section,blog:"" %}</li>
                {% endif %}
              {% endfor %}
              {% else %}
              {% for i in (1..section.settings.pc_number) %}
                <li class="swiper-slide">{% include 'blog_item', section :section,blog:"" %}</li>
              {% endfor %}
              {% endif %}
          </ul>

          <div class="blog-prev model-hide" id="block_prev_{{ blockId  }}">{% include 'icon_goya_left' %}</div>
          <div class="blog-next model-hide" id="block_next_{{ blockId  }}">{% include 'icon_goya_right' %}</div>
          <div class="swiper-blog-pagination swiper-blog-pagination-{{ blockId }}"></div>

      </div>
  </div>
<script type="text/javascript">
(function(){const blockId = "{{ blockId  }}";

var sildes_blockId = new Swiper("#block_blog_list_{{blockId}}", {
    slidesPerView: Number("{{ section.settings.pc_number }}"),
    spaceBetween: 30,
    navigation: {
        nextEl: "#block_next_{{ blockId  }}",
        prevEl: "#block_prev_{{ blockId  }}"
    },
    pagination: {
        el: '.swiper-blog-pagination-{{blockId}}',
        clickable:true
    },
    breakpoints: {
        640: {
            slidesPerView: 2.5,
            spaceBetween: 14
        }
    }
});
})()
</script>
{% schema %}
{
	"tag": "section",
	"class": "block_blogs",
	"is_global": false,
	"icon": "icon-boke",
	"name": {
		"zh_CN": "博客"
	},
	"max_blocks": 10,
	"blocks": [
		{
			"name": {
				"zh_CN": "博客"
			},
			"type": "blogs-items",
			"settings": [
				{
					"type": "card_blog",
					"id": "blog",
					"label": {
						"zh_CN": "博客"
					},
					"default": {
						"id": "",
						"title": ""
					}
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题"
			},
			"placeholder": {
				"zh_CN": "请输入标题"
			},
			"default": "Latest News"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述"
			},
			"placeholder": {
				"zh_CN": "请输入描述"
			},
			"default": "Knausgaard meditation gochujang 8-bit scenester franzen gastropub distillery biodiesel."
		},
		{
			"type": "card_switch",
			"id": "date",
			"label": {
				"zh_CN": "显示日期"
			},
			"default": true
		},
		{
			"type": "card_switch",
			"id": "author",
			"label": {
				"zh_CN": "显示作者"
			},
			"default": true
		},
		{
			"type": "card_switch",
			"id": "blog_descript",
			"label": {
				"zh_CN": "显示简短描述"
			},
			"default": true
		},
		{
			"type": "card_select",
			"id": "text_alignment",
			"label": {
				"zh_CN": "文字对齐方式"
			},
			"option": [
				{
					"label": {
						"zh_CN": "左对齐"
					},
					"value": "left"
				},
				{
					"label": {
						"zh_CN": "右对齐"
					},
					"value": "right"
				}
			],
			"default": "left"
		},
		{
			"type": "card_slider",
			"id": "pc_number",
			"max": "5",
			"min": "2",
			"label": {
				"zh_CN": "每排数量"
			},
			"info": {
				"zh_CN": "只对pc有效"
			},
			"default": "3"
		}
	],
	"default": {
		"settings": {
			"title": "Latest News",
			"detail": "Knausgaard meditation gochujang 8-bit scenester franzen gastropub distillery biodiesel.",
			"date": true,
			"author": true,
			"blog_descript": true,
			"text_alignment": "left",
			"pc_number": "3"
		},
		"blocks": [
			{
				"blog": {
					"id": "",
					"title": ""
				},
				"block_type": "blogs-items"
			},
			{
				"blog": {
					"id": "",
					"title": ""
				},
				"block_type": "blogs-items"
			},
			{
				"blog": {
					"id": "",
					"title": ""
				},
				"block_type": "blogs-items"
			},
			{
				"blog": {
					"id": "",
					"title": ""
				},
				"block_type": "blogs-items"
			}
		]
	}
}
{% endschema %}